<template>
  <div v-loading="loading" class="matrix-chart" @dragstart="handleDragStart" @dragend="handleDragEnd()">
    <div class="mc-title">
      <el-input v-model="filterText" placeholder="请输入指标名称" prefix-icon="el-icon-search" clearable />
    </div>
    <div class="mc-content">
      <div v-for="item in filteredViews" :key="item.id" :data-id="item.id" draggable class="mc-item">
        <label>#</label>
        <span class="ml-1">{{ item.name }}</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import componentList from '@/components/canvas/customComponent/component-list'
import { deepCopy, matrixBaseChange } from '@/components/canvas/utils/utils'
import eventBus from '@/components/canvas/utils/eventBus'
import { requestMatrixViewList } from '@/api/panel/view'

export default {
  props: {
    visible: { type: Boolean, default: false },
  },
  data() {
    return {
      loading: false,
      filterText: '',
      views: [], // 面板列表
    }
  },
  computed: {
    ...mapState(['canvasStyleData']),
    filteredViews() {
      if (!this.filterText) {
        return this.views
      }

      return this.views.filter((item) => item.name.includes(this.filterText))
    },
  },
  watch: {
    visible(val) {
      if (val) {
        this.loadMatrixViewList()
      }
    },
  },
  created() {
    this.loadMatrixViewList()
  },
  methods: {
    onFilterTextChange() {},
    handleDragStart(ev) {
      this.$store.commit('setDragComponentInfo', this.getViewComponentInfo())
      ev.dataTransfer.effectAllowed = 'copy'
      const dataTrans = {
        type: 'view',
        id: ev.target.dataset.id,
      }
      this.$store.commit('clearTabMoveInfo')
      ev.dataTransfer.setData('componentInfo', JSON.stringify(dataTrans))
      eventBus.$emit('startMoveIn')
    },
    handleDragEnd(ev) {
      this.$store.commit('clearDragComponentInfo')
    },
    getViewComponentInfo() {
      let component
      // 用户视图设置 复制一个模板
      componentList.forEach((componentTemp) => {
        if (componentTemp.type === 'view') {
          component = matrixBaseChange(deepCopy(componentTemp))
        }
      })
      component.auxiliaryMatrix = this.canvasStyleData.auxiliaryMatrix
      component.moveStatus = 'start'
      return component
    },
    async loadMatrixViewList() {
      this.loading = true
      try {
        const { success, data } = await requestMatrixViewList({})
        if (success) {
          this.views = data.map((item) => ({
            id: item.id,
            name: item.name,
          }))
        }
      } catch (error) {
        console.log(error)
      }
      this.loading = false
    },
  },
}
</script>
<style lang="scss" scoped>
.matrix-chart {
  .mc-title {
    padding: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 1.25rem;
  }
  .mc-content {
    padding: 4px;
    .mc-item {
      padding: 4px 12px;
      font-size: 14px;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      &:hover {
        outline: 1px solid var(--primary-color);
      }
      label {
        color: #999;
      }
    }
  }
}
</style>
